<template>
  <div class="experts-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="container">
        <div class="header-content">
          <div class="header-left">
            <h1 class="page-title">
              <el-icon class="title-icon"><Avatar /></el-icon>
              专家团队
            </h1>
            <p class="page-subtitle">汇聚全国知名专家，为您提供专业医疗服务</p>
          </div>
          <div class="header-stats">
            <div class="stat-item">
              <div class="stat-number">{{ experts.length }}</div>
              <div class="stat-label">专家总数</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ departments.length }}</div>
              <div class="stat-label">科室数量</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ totalAppointments }}</div>
              <div class="stat-label">累计服务</div>
            </div>
          </div>
        </div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/portal' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>专家团队</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    
    <div class="container main-content">
      <!-- 搜索与筛选 -->
      <div class="search-filter-section">
        <el-card class="search-card" shadow="hover">
          <div class="search-header">
            <el-icon class="search-icon"><Search /></el-icon>
            <span class="search-title">专家搜索</span>
          </div>
          
          <div class="search-content">
            <div class="search-bar">
              <el-input
                v-model="searchKeyword"
                placeholder="请输入专家姓名、科室或专长进行搜索"
                class="search-input"
                clearable
                @keyup.enter="handleSearch"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
                <template #append>
                  <el-button type="primary" @click="handleSearch">搜索</el-button>
                </template>
              </el-input>
            </div>
            
            <div class="filter-section">
              <div class="filter-row">
                <div class="filter-group">
                  <span class="filter-label">科室：</span>
                  <el-select v-model="departmentFilter" placeholder="选择科室" clearable @change="handleFilter" style="width: 200px;">
                    <el-option
                      v-for="dept in departments"
                      :key="dept.value"
                      :label="dept.label"
                      :value="dept.value"
                    >
                      <span style="float: left">{{ dept.label }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ getDepartmentCount(dept.value) }}人</span>
                    </el-option>
                  </el-select>
                </div>
                
                <div class="filter-group">
                  <span class="filter-label">职称：</span>
                  <el-select v-model="titleFilter" placeholder="选择职称" clearable @change="handleFilter" style="width: 180px;">
                    <el-option
                      v-for="title in titles"
                      :key="title.value"
                      :label="title.label"
                      :value="title.value"
                    />
                  </el-select>
                </div>
                
                <div class="filter-group">
                  <span class="filter-label">专长：</span>
                  <el-select v-model="specialtyFilter" placeholder="选择专长" clearable @change="handleFilter" style="width: 180px;">
                    <el-option
                      v-for="specialty in specialties"
                      :key="specialty.value"
                      :label="specialty.label"
                      :value="specialty.value"
                    />
                  </el-select>
                </div>
                
                <div class="filter-group">
                  <span class="filter-label">排序：</span>
                  <el-select v-model="sortType" placeholder="排序方式" @change="handleSort" style="width: 180px;">
                    <el-option label="评分最高" value="rating" />
                    <el-option label="预约最多" value="appointments" />
                    <el-option label="经验最丰富" value="experience" />
                  </el-select>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      
      <!-- 专家列表 -->
      <div class="experts-section">
        <div class="section-header">
          <h2 class="section-title">
            <el-icon><User /></el-icon>
            专家列表
            <span class="result-count">（共找到 {{ totalExperts }} 位专家）</span>
          </h2>
          <div class="view-mode">
            <el-radio-group v-model="viewMode" @change="handleViewModeChange">
              <el-radio-button label="card">卡片视图</el-radio-button>
              <el-radio-button label="list">列表视图</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        
        <div v-if="filteredExperts.length > 0" class="experts-container">
          <!-- 卡片视图 -->
          <div v-if="viewMode === 'card'" class="experts-grid">
            <el-card
              v-for="expert in filteredExperts"
              :key="expert.id"
              class="expert-card"
              shadow="hover"
              @click="navigateToExpertDetail(expert.id)"
            >
              <div class="expert-card-content">
                <div class="expert-avatar-section">
                  <el-avatar :size="80" :src="expert.avatar" />
                  <div class="expert-status" :class="{ online: expert.isOnline }">
                    {{ expert.isOnline ? '在线' : '离线' }}
                  </div>
                </div>
                
                <div class="expert-info">
                  <h3 class="expert-name">{{ expert.name }}</h3>
                  <div class="expert-tags">
                    <el-tag :type="getTitleType(expert.title)" size="small">{{ expert.title }}</el-tag>
                    <el-tag type="info" size="small">{{ expert.department }}</el-tag>
                  </div>
                  
                  <div class="expert-rating">
                    <el-rate v-model="expert.rating" disabled size="small" />
                    <span class="rating-text">{{ expert.rating }}</span>
                    <span class="appointment-count">{{ expert.appointmentCount }}次预约</span>
                  </div>
                  
                  <div class="expert-specialties">
                    <span class="specialties-label">擅长：</span>
                    <div class="specialties-list">
                      <el-tag
                        v-for="(specialty, index) in expert.specialties.slice(0, 3)"
                        :key="index"
                        size="small"
                        effect="plain"
                        type="success"
                      >
                        {{ specialty }}
                      </el-tag>
                      <span v-if="expert.specialties.length > 3" class="more-specialties">
                        +{{ expert.specialties.length - 3 }}
                      </span>
                    </div>
                  </div>
                  
                  <div class="expert-experience">
                    <el-icon><Trophy /></el-icon>
                    从业{{ expert.experience }}年
                  </div>
                </div>
                
                <div class="expert-actions">
                  <el-button 
                    type="primary" 
                    @click.stop="navigateToAppointment(expert.id, expert.department)"
                    :disabled="!expert.isAvailable"
                  >
                    {{ expert.isAvailable ? '立即预约' : '暂不可约' }}
                  </el-button>
                  <el-button 
                    type="success" 
                    plain 
                    @click.stop="startConsultation(expert.id)"
                    :disabled="!expert.isOnline"
                  >
                    在线咨询
                  </el-button>
                </div>
              </div>
            </el-card>
          </div>
          
          <!-- 列表视图 -->
          <div v-else class="experts-list">
            <el-card
              v-for="expert in filteredExperts"
              :key="expert.id"
              class="expert-list-card"
              shadow="hover"
              @click="navigateToExpertDetail(expert.id)"
            >
              <div class="expert-list-content">
                <div class="expert-basic-info">
                  <el-avatar :size="60" :src="expert.avatar" />
                  <div class="basic-details">
                    <h3 class="expert-name">{{ expert.name }}</h3>
                    <div class="expert-meta">
                      <el-tag :type="getTitleType(expert.title)" size="small">{{ expert.title }}</el-tag>
                      <span class="department">{{ expert.department }}</span>
                      <span class="experience">{{ expert.experience }}年经验</span>
                    </div>
                  </div>
                </div>
                
                <div class="expert-detailed-info">
                  <div class="info-row">
                    <span class="info-label">擅长领域：</span>
                    <span class="info-content">{{ expert.specialties.join('、') }}</span>
                  </div>
                  <div class="info-row">
                    <span class="info-label">医生简介：</span>
                    <span class="info-content">{{ expert.brief }}</span>
                  </div>
                </div>
                
                <div class="expert-stats">
                  <div class="stat-item">
                    <el-rate v-model="expert.rating" disabled size="small" />
                    <span>{{ expert.rating }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-number">{{ expert.appointmentCount }}</span>
                    <span class="stat-label">预约次数</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-number">{{ expert.consultationCount || 0 }}</span>
                    <span class="stat-label">咨询次数</span>
                  </div>
                </div>
                
                <div class="expert-actions">
                  <el-button 
                    type="primary" 
                    size="small"
                    @click.stop="navigateToAppointment(expert.id, expert.department)"
                    :disabled="!expert.isAvailable"
                  >
                    预约挂号
                  </el-button>
                  <el-button 
                    type="success" 
                    size="small"
                    plain 
                    @click.stop="startConsultation(expert.id)"
                    :disabled="!expert.isOnline"
                  >
                    在线咨询
                  </el-button>
                  <el-button 
                    type="info" 
                    size="small"
                    plain 
                    @click.stop="navigateToExpertDetail(expert.id)"
                  >
                    查看详情
                  </el-button>
                </div>
              </div>
            </el-card>
          </div>
        </div>
        
        <el-empty v-else description="没有找到匹配的专家，请调整筛选条件" />
      </div>
      
      <!-- 分页 -->
      <div class="pagination-container" v-if="totalExperts > 0">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[6, 12, 18, 24]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalExperts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const searchKeyword = ref('')
const departmentFilter = ref('')
const titleFilter = ref('')
const specialtyFilter = ref('')
const sortType = ref('rating')
const viewMode = ref('card')
const currentPage = ref(1)
const pageSize = ref(12)

// 科室选项
const departments = [
  { value: '心血管内科', label: '心血管内科' },
  { value: '神经内科', label: '神经内科' },
  { value: '消化内科', label: '消化内科' },
  { value: '呼吸内科', label: '呼吸内科' },
  { value: '内分泌科', label: '内分泌科' },
  { value: '普通外科', label: '普通外科' },
  { value: '骨科', label: '骨科' },
  { value: '妇产科', label: '妇产科' },
  { value: '儿科', label: '儿科' },
  { value: '眼科', label: '眼科' },
  { value: '耳鼻喉科', label: '耳鼻喉科' },
  { value: '皮肤科', label: '皮肤科' }
]

// 职称选项
const titles = [
  { value: '主任医师', label: '主任医师' },
  { value: '副主任医师', label: '副主任医师' },
  { value: '主治医师', label: '主治医师' },
  { value: '住院医师', label: '住院医师' }
]

// 专长选项
const specialties = [
  { value: '冠心病', label: '冠心病' },
  { value: '高血压', label: '高血压' },
  { value: '糖尿病', label: '糖尿病' },
  { value: '脑血管病', label: '脑血管病' },
  { value: '胃肠疾病', label: '胃肠疾病' },
  { value: '肝胆疾病', label: '肝胆疾病' },
  { value: '骨关节疾病', label: '骨关节疾病' },
  { value: '妇科肿瘤', label: '妇科肿瘤' },
  { value: '儿童发育', label: '儿童发育' },
  { value: '眼底疾病', label: '眼底疾病' },
  { value: '鼻咽疾病', label: '鼻咽疾病' },
  { value: '皮肤过敏', label: '皮肤过敏' }
]

// 专家数据
const experts = ref([
  {
    id: 1,
    name: '张志明',
    title: '主任医师',
    department: '心血管内科',
    specialties: ['冠心病', '心力衰竭', '心律失常', '高血压'],
    rating: 4.9,
    appointmentCount: 2156,
    consultationCount: 1234,
    experience: 28,
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    brief: '心血管疾病权威专家，从事心血管临床工作28年，擅长冠心病介入治疗、心力衰竭综合治疗等，发表SCI论文50余篇。',
    isOnline: true,
    isAvailable: true
  },
  {
    id: 2,
    name: '李清华',
    title: '主任医师',
    department: '神经内科',
    specialties: ['脑血管病', '帕金森病', '癫痫', '头痛'],
    rating: 4.8,
    appointmentCount: 1923,
    consultationCount: 987,
    experience: 25,
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    brief: '神经内科知名专家，在脑血管疾病、神经系统变性疾病诊治方面具有丰富经验，主持多项国家级科研项目。',
    isOnline: false,
    isAvailable: true
  },
  {
    id: 3,
    name: '王建国',
    title: '副主任医师',
    department: '普通外科',
    specialties: ['胃肠外科', '微创手术', '疝气修补', '甲状腺手术'],
    rating: 4.7,
    appointmentCount: 1654,
    consultationCount: 768,
    experience: 18,
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    brief: '普外科资深医师，精通腹腔镜微创手术，在胃肠道疾病、疝气治疗方面有独特见解，手术成功率99%以上。',
    isOnline: true,
    isAvailable: true
  },
  {
    id: 4,
    name: '赵美琳',
    title: '主任医师',
    department: '妇产科',
    specialties: ['妇科肿瘤', '不孕不育', '高危妊娠', '宫颈疾病'],
    rating: 4.9,
    appointmentCount: 2034,
    consultationCount: 1456,
    experience: 22,
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    brief: '妇产科主任，在妇科肿瘤、不孕症诊治方面造诣深厚，成功实施各类妇科手术5000余例，患者好评率98%。',
    isOnline: true,
    isAvailable: true
  },
  {
    id: 5,
    name: '陈大伟',
    title: '副主任医师',
    department: '骨科',
    specialties: ['脊柱外科', '关节置换', '运动损伤', '骨肿瘤'],
    rating: 4.6,
    appointmentCount: 1432,
    consultationCount: 634,
    experience: 16,
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    brief: '骨科专科医师，专攻脊柱疾病和关节疾病治疗，在微创脊柱手术、人工关节置换方面技术精湛。',
    isOnline: false,
    isAvailable: true
  },
  {
    id: 6,
    name: '孙丽娟',
    title: '主治医师',
    department: '儿科',
    specialties: ['儿童发育', '新生儿疾病', '儿童哮喘', '儿童心理'],
    rating: 4.8,
    appointmentCount: 1876,
    consultationCount: 1123,
    experience: 12,
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    brief: '儿科专业医师，对儿童常见病、多发病有丰富的诊疗经验，深受患儿及家长信赖，儿童友好型医生。',
    isOnline: true,
    isAvailable: true
  },
  {
    id: 7,
    name: '周天华',
    title: '主任医师',
    department: '消化内科',
    specialties: ['消化道肿瘤', '炎症性肠病', '肝胆疾病', '胃食管反流'],
    rating: 4.9,
    appointmentCount: 2198,
    consultationCount: 1345,
    experience: 30,
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    brief: '消化内科学科带头人，在消化系统疾病诊治方面经验丰富，特别擅长内镜诊疗技术，获得多项医学成就奖。',
    isOnline: true,
    isAvailable: true
  },
  {
    id: 8,
    name: '吴秀英',
    title: '副主任医师',
    department: '眼科',
    specialties: ['白内障', '青光眼', '视网膜疾病', '近视手术'],
    rating: 4.7,
    appointmentCount: 1567,
    consultationCount: 789,
    experience: 20,
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    brief: '眼科副主任医师，在白内障、青光眼治疗和屈光手术方面技术精湛，完成各类眼科手术万余例。',
    isOnline: false,
    isAvailable: true
  },
  {
    id: 9,
    name: '郑建强',
    title: '主治医师',
    department: '耳鼻喉科',
    specialties: ['鼻窦炎', '中耳炎', '咽喉疾病', '鼾症治疗'],
    rating: 4.5,
    appointmentCount: 1234,
    consultationCount: 567,
    experience: 14,
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    brief: '耳鼻喉科专业医师，在鼻腔鼻窦疾病、咽喉疾病诊治方面经验丰富，擅长功能性鼻内镜手术。',
    isOnline: true,
    isAvailable: false
  },
  {
    id: 10,
    name: '刘海峰',
    title: '主任医师',
    department: '内分泌科',
    specialties: ['糖尿病', '甲状腺疾病', '骨质疏松', '肥胖症'],
    rating: 4.8,
    appointmentCount: 1789,
    consultationCount: 1012,
    experience: 24,
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    brief: '内分泌科主任医师，在糖尿病及其并发症、甲状腺疾病诊治方面具有丰富经验，制定个性化治疗方案。',
    isOnline: true,
    isAvailable: true
  },
  {
    id: 11,
    name: '马晓明',
    title: '副主任医师',
    department: '皮肤科',
    specialties: ['皮肤过敏', '银屑病', '湿疹', '皮肤美容'],
    rating: 4.6,
    appointmentCount: 1345,
    consultationCount: 876,
    experience: 17,
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    brief: '皮肤科副主任医师，在常见皮肤病、过敏性疾病治疗方面经验丰富，注重个性化诊疗方案。',
    isOnline: false,
    isAvailable: true
  },
  {
    id: 12,
    name: '田雨静',
    title: '主任医师',
    department: '呼吸内科',
    specialties: ['哮喘', '慢阻肺', '肺癌', '呼吸衰竭'],
    rating: 4.9,
    appointmentCount: 2067,
    consultationCount: 1234,
    experience: 26,
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    brief: '呼吸内科学科带头人，在呼吸系统疾病诊治、危重症救治方面具有丰富经验，多次获得医疗质量奖。',
    isOnline: true,
    isAvailable: true
  }
])

// 计算总预约数
const totalAppointments = computed(() => {
  return experts.value.reduce((total, expert) => total + expert.appointmentCount, 0)
})

// 获取科室专家数量
const getDepartmentCount = (department) => {
  return experts.value.filter(expert => expert.department === department).length
}

// 获取职称类型
const getTitleType = (title) => {
  const typeMap = {
    '主任医师': 'danger',
    '副主任医师': 'warning',
    '主治医师': 'success',
    '住院医师': 'info'
  }
  return typeMap[title] || 'info'
}

// 过滤和排序后的专家列表
const filteredAndSortedExperts = computed(() => {
  let result = [...experts.value]
  
  // 关键词搜索
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    result = result.filter(expert => 
      expert.name.toLowerCase().includes(keyword) || 
      expert.department.toLowerCase().includes(keyword) ||
      expert.specialties.some(s => s.toLowerCase().includes(keyword)) ||
      expert.brief.toLowerCase().includes(keyword)
    )
  }
  
  // 科室筛选
  if (departmentFilter.value) {
    result = result.filter(expert => expert.department === departmentFilter.value)
  }
  
  // 职称筛选
  if (titleFilter.value) {
    result = result.filter(expert => expert.title === titleFilter.value)
  }
  
  // 专长筛选
  if (specialtyFilter.value) {
    result = result.filter(expert => 
      expert.specialties.some(s => s === specialtyFilter.value)
    )
  }
  
  // 排序
  if (sortType.value === 'rating') {
    result.sort((a, b) => b.rating - a.rating)
  } else if (sortType.value === 'appointments') {
    result.sort((a, b) => b.appointmentCount - a.appointmentCount)
  } else if (sortType.value === 'experience') {
    result.sort((a, b) => b.experience - a.experience)
  }
  
  return result
})

// 分页后的专家列表
const filteredExperts = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredAndSortedExperts.value.slice(start, end)
})

// 总专家数量
const totalExperts = computed(() => filteredAndSortedExperts.value.length)

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1
}

// 筛选处理
const handleFilter = () => {
  currentPage.value = 1
}

// 排序处理
const handleSort = () => {
  currentPage.value = 1
}

// 视图模式切换
const handleViewModeChange = () => {
  // 卡片视图和列表视图的分页大小不同
  if (viewMode.value === 'card') {
    pageSize.value = 12
  } else {
    pageSize.value = 8
  }
  currentPage.value = 1
}

// 分页处理
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
}

const handleCurrentChange = (page) => {
  currentPage.value = page
}

// 导航到专家详情
const navigateToExpertDetail = (expertId) => {
  router.push(`/portal/expert/${expertId}`)
}

// 导航到预约挂号
const navigateToAppointment = (expertId, department) => {
  const departmentId = departments.findIndex(dept => dept.value === department) + 1
  router.push({
    path: '/portal/patient/appointment',
    query: {
      doctorId: expertId,
      departmentId: departmentId,
      departmentName: department
    }
  })
}

// 开始在线咨询
const startConsultation = (expertId) => {
  // 这里可以跳转到咨询页面或打开咨询窗口
  ElMessage.success('正在为您连接专家，请稍等...')
  // router.push(`/portal/consultation/${expertId}`)
}

onMounted(() => {
  // 页面加载时的初始化操作
})
</script>

<style scoped>
.experts-page {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
  backdrop-filter: blur(10px);
  padding: 30px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 32px;
  color: #2c3e50;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.title-icon {
  margin-right: 12px;
  font-size: 36px;
  color: #1989fa;
}

.page-subtitle {
  font-size: 16px;
  color: #646566;
  margin: 0;
}

.header-stats {
  display: flex;
  gap: 40px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #1989fa;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #646566;
}

/* 主要内容区 */
.main-content {
  padding: 30px 0;
}

/* 搜索筛选区域 */
.search-filter-section {
  margin-bottom: 30px;
}

.search-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.search-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.search-icon {
  font-size: 20px;
  color: #1989fa;
  margin-right: 10px;
}

.search-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.search-content {
  space-y: 20px;
}

.search-bar {
  margin-bottom: 20px;
}

.search-input {
  width: 100%;
}

.filter-section {
  margin-top: 20px;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.filter-group {
  display: flex;
  align-items: center;
}

.filter-label {
  margin-right: 10px;
  color: #606266;
  white-space: nowrap;
  font-weight: 500;
}

/* 专家区域 */
.experts-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
}

.section-title {
  font-size: 20px;
  color: #2c3e50;
  margin: 0;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.section-title .el-icon {
  margin-right: 10px;
  color: #1989fa;
}

.result-count {
  font-size: 14px;
  color: #909399;
  font-weight: normal;
  margin-left: 10px;
}

/* 卡片视图 */
.experts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 24px;
}

.expert-card {
  border-radius: 12px;
  border: none;
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
}

.expert-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.expert-card-content {
  padding: 24px;
}

.expert-avatar-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 20px;
  position: relative;
}

.expert-status {
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  background: #f56c6c;
  color: white;
}

.expert-status.online {
  background: #67c23a;
}

.expert-info {
  text-align: center;
  margin-bottom: 20px;
}

.expert-name {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 12px;
}

.expert-tags {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 15px;
}

.expert-rating {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.rating-text {
  font-weight: 600;
  color: #f56c6c;
}

.appointment-count {
  font-size: 12px;
  color: #909399;
}

.expert-specialties {
  margin-bottom: 15px;
}

.specialties-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
  display: block;
}

.specialties-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.more-specialties {
  font-size: 12px;
  color: #909399;
  margin-left: 5px;
}

.expert-experience {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
}

.expert-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* 列表视图 */
.experts-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.expert-list-card {
  border-radius: 12px;
  border: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.expert-list-card:hover {
  transform: translateX(8px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.expert-list-content {
  padding: 24px;
  display: grid;
  grid-template-columns: 200px 1fr 150px 200px;
  gap: 24px;
  align-items: center;
}

.expert-basic-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.basic-details {
  flex: 1;
}

.expert-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.department,
.experience {
  font-size: 14px;
  color: #606266;
}

.expert-detailed-info {
  flex: 1;
}

.info-row {
  margin-bottom: 8px;
  font-size: 14px;
}

.info-label {
  color: #606266;
  margin-right: 8px;
}

.info-content {
  color: #2c3e50;
}

.expert-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.stat-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.stat-number {
  font-weight: 600;
  color: #1989fa;
}

.stat-label {
  font-size: 12px;
  color: #909399;
}

/* 分页 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .experts-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
  
  .expert-list-content {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  
  .header-stats {
    gap: 20px;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  
  .filter-group {
    width: 100%;
  }
  
  .filter-group .el-select {
    width: 100% !important;
  }
  
  .experts-grid {
    grid-template-columns: 1fr;
  }
  
  .expert-actions {
    flex-direction: column;
  }
}

@media (max-width: 576px) {
  .container {
    padding: 0 15px;
  }
  
  .experts-section {
    padding: 20px 15px;
  }
  
  .search-card {
    margin: 0 -5px;
  }
}
</style> 